<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-row :gutter="24">
        <a-col :span="11">
          <a-alert
            message="需要到微信公众平台(开发管理->开发设置->扫普通链接二维码打开小程序)中进行配置"
            banner
          /><br />
          <a-alert banner :showIcon="false" type="warning">
            <template slot="message">
              <div>协议类型: https</div>
              <div>选择大小写: 小写</div>
              <div>二维码规则: https://{{ qrcodeRule }} <a-icon type="copy" @click="copyContent(qrcodeRule)" /></div>
              <div>前缀占用规则: 不占用</div>
              <div>
                小程序功能页面: alipay-order/orderMeal/orderMeal
                <a-icon type="copy" @click="copyContent('alipay-order/orderMeal/orderMeal')" />
              </div>
            </template>
          </a-alert>
        </a-col>
        <a-col :span="2"></a-col>
        <a-col :span="11">
          <a-alert
            message="该功能需要到支付宝开放平台(选择应用->审核&发布->小程序码->关联普通二维码)中进行配置"
            banner
          /><br />
          <a-alert banner :showIcon="false" type="warning">
            <template slot="message">
              <div>匹配规则: 模糊匹配</div>
              <div>二维码地址: https://{{ qrcodeRule }} <a-icon type="copy" @click="copyContent(qrcodeRule)" /></div>
              <div>
                小程序功能页: alipay-order/orderMeal/orderMeal
                <a-icon type="copy" @click="copyContent('alipay-order/orderMeal/orderMeal')" />
              </div>
            </template>
          </a-alert>
        </a-col>

      </a-row>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { showUrl } from '@/api/saas/moneySaasCode'
import storage from 'store'
export default {
  data() {
    return {

      mini_url: '',

      param_url: ''
    }
  },
  created() {
    this.getParams();
  },
  methods: {
    async getParams() {
      const res = await showUrl()
      if (parseInt(res.code) === 0) {
        this.param_url = res.data.param_url;
        this.mini_url = res.data.mini_url;
      }
    },

    copyContent: function(text) {
      this.$copyText(text)
        .then(e => {
          this.$message.success('复制成功')
        })
        .catch(err => {
          console.log(err)
          this.$message.error('复制失败')
        })
    },
  },
  computed: {
    qrcodeRule: function() {
      if (this.business_model !== 1) {
        return window.location.host + '/web/food/saas'
      }
      return window.location.host + '/web/food/' + storage.get('storeId')
    }
  },
}
</script>


<style lang="less" scoped>
.status {
  display: flex;
  align-items: center;
  span:nth-child(1) {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
  }
  .grey {
    background-color: #ccc;
  }
  .orange {
    background-color: #faad14;
  }
  .green {
    background-color: #65c817;
  }
}
.action {
  display: flex;
  align-items: center;
  .line {
    width: 1px;
    height: 14px;
    background-color: #d8d8d8;
  }
}
.code {
  display: flex;
  flex-direction: column;
  align-items: center;
  img {
    width: 185px;
    height: 185px;
    margin-bottom: 20px;
  }
}
.btns {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.name {
  display: flex;
  align-items: center;
  .pic {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 24px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .info {
    flex: auto;
    width: 0;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    span {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    span:nth-child(2) {
      color: rgba(0, 0, 0, 0.45);
      margin-top: 6px;
    }
  }
}
</style>